<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>index</title>
	<style type="text/css">
		/*
YUI 3.14.0 (build a01e97d)
Copyright 2013 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/

html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}

		/*common css*/
		body{
			font: 12px "微软雅黑", Arial;
			background: #f0f0f0;
		}
		ul, ol, dl, li{
			list-style: none;
		}
		.clearfix:after{
			display: block;
			visibility: hidden;
			content: '\020';
			height: 0;
			font-size: 0;
			clear: both;
		}
		.clearfix{
			*zoom:1;
		}


		/*全局大section设置*/
		#body-wrap{
			width: 1000px;
			margin: 0 auto;
			padding-bottom: 100px;
		}

		/*顶部导航和链接*/
		#head-wrap-holder{
			height: 80px;
			overflow: hidden;
		}
		#head-wrap{
			position: relative;
			padding-left: 76px;
		}
		.head-fixed #head-wrap{
			position: fixed;
			top: 0;
			left: 50%;
			width: 924px;
			z-index: 9999;
			margin-left: -500px;
			background: #f0f0f0;
		}
		#site-link{
			background: #2d2d2d;
		}
		.site-link-inner{
			float: right;
		}
		.self-link{
			display: inline-block;
			height: 40px;
			line-height: 40px;
			padding: 0 8px;
			color: #ccc;
			text-decoration: none;
		}

		#nav-wrap{
			position: relative;
			margin: 10px 0 0 30px;
		}
		.nav-item{
			height: 28px;
			line-height: 28px;
			padding: 0 10px;
			float: left;
			font-size: 14px;
			text-align: center;
			cursor: pointer;
			margin-left: 10px;
		}
		.nav-item-active, .nav-item:hover{
			background: #2d2d2d;
			color: #fff;
		}
		.search-con{
			position: absolute;
			right:0;
			top: 0;
		}
		#logo-link{
			position: absolute;
			width: 76px;
			height: 76px;
			background: orange;
			left: 0;
			top: 0;
		}

		/*顶部焦点区域*/
		#focus-con{
			position: relative;
			height: 200px;
			margin: 20px 0;
		}
		/*顶部轮播图区域*/
		#pic-slider-con{
			position: absolute;
			left: 0;
			top: 0;
			width: 470px;
			height: 200px;
			overflow: hidden;
		}
		.slider-inner{
			width: 99999px;
		}
		.slider-item{
			float: left;
			height: 200px;
			width: 470px;
			overflow: hidden;
			position: relative;
		}
		.slider-item-link{
			display: block;
			height: 100%;
		}
		.slider-item-link img{
			display: block;
			border: 0 none;
			width: 470px;
			height: 200px;
			
		}
		.slider-item-desc{
			position: absolute;
			left: 0;
			bottom: 0;
			right: 0;
			height: 28px;
			font: 12px/28px "微软雅黑", Arial;
			color: #fff;
			background: rgba(0, 0, 0, .6);
			text-indent: 20px;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}
		/*轮播图 右侧的推荐文章区域*/
		#post-recommend-wrap{
			margin-left: 480px;
			padding-top: 5px;
		}
		.post-recommend-item{
			position: relative;
			margin-bottom: 5px;
		}
		.post-recommend-link{
			display: block;
			text-decoration: none;
		}
		.post-recommend-link img{
			width:90px;
			height: 90px;
			position: absolute;
			left: 0;
			top: 0;
		}
		.post-content{
			margin-left: 100px;
			height: 90px;
			overflow: hidden;
			color: #000;
		}
		.post-title{
			font: bold 16px/20px "微软雅黑", Arial;
			word-break: break-all;
		}
		.post-digest{
			font: 14px/20px "微软雅黑", Arial;
			word-break: break-all;
		}

		/**中心内容区域**/
		#content-wrap{
			position: relative;
		}

		/*右侧边栏*/
		#sidebar{
			float: right;
			width: 270px;
		}
		.sidebar-item{
			margin-bottom: 20px;
		}
		.sidebar-item-title{
			font: 14px/20px "微软雅黑", Arial;
		}
		.sidebar-item-title .more{
			float: right;
			text-decoration: none;
		}
		.sidebar-item-title .more:hover{
			text-decoration: underline;
		}
		/*每日博学*/
		.video-item{
			position: relative;
			overflow: hidden;
			margin-bottom: 10px;
		}
		.video-item img{
			width: 270px;
			height: 160px;
			
			display: block;
		}
		.video-desc-wrap{
			position: absolute;
			height: 140px;
			width: 90px;
			word-break: break-all;
			overflow: hidden;
			background: #fff;
			right: 10px;
			top: 10px;
		}
		.video-desc{
			height: 90px;
			overflow: hidden;
			padding: 5px;
		}
		.video-link{
			display: block;
			width: 70px;
			height: 30px;
			line-height: 30px;
			text-align: center;
			text-decoration: none;
			color: #fff;
			background: #333;
			margin: 5px auto;
		}
		/*客户伙伴*/
		.customer-item{
			float: left;
			margin: 0 17px 17px 0;
		}
		.customer-link{
			display: block;
			overflow: hidden;
			width: 50px;
			height: 66px;
			text-decoration: none;
			color: #000;
			overflow: hidden;
		}
		.customer-link:hover{
			text-decoration: underline;
		}
		.customer-link img{
			width: 50px;
			height: 50px;
			display: block;
		}
		.customer-name{
			text-align: center;
			height: 16px;
			line-height: 16px;
		}

		/*文章列表区域*/
		#post-container-wrap{
			margin-right: 300px;
		}
		.post-item{
			overflow: hidden;
			padding-bottom: 20px;
			border-bottom: 1px dashed gray;
			margin-bottom: 30px;
		}
		.post-item img{
			width: 220px;
			height: 120px;
			float: left;

		}
		.post-content-wrap{
			margin-left: 230px;
		}
		.post-item-title{
			font: normal 16px/20px "微软雅黑", Arial;
			max-height: 40px;
			overflow: hidden;
		}
		.post-abstract{
			font: 12px/20px "微软雅黑", Arial;
			max-height: 60px;
			overflow: hidden;
			word-break: break-all;
		}
		.post-meta-info{
			color: #999;
			margin: 10px 0;
		}


		/***页脚**/
		#footer{
			clear: both;
			text-align: center;
			font-family: Arial;
			margin-top: 100px;
		}

		/**返回顶部**/
		#back-top{
			position: fixed;
			right: 30px;
			bottom: 80px;
			width: 60px;
			height: 60px;
			text-align: center;
			background: #666;
			color: #fff;
			font-size: 40px;
			line-height: 60px;
			cursor: default;
			opacity: .5;
			transition: all linear .5s;
		}
		#back-top:hover{
			opacity: 1;
		}

	</style>
</head>
<body>

	<div id="body-wrap">
		<div id="head-wrap-holder">
			<div id="head-wrap">
				<div id="site-link" class="clearfix">
					<div class="site-link-inner">
						<a href="#" class="self-link">我们</a>
						<a href="#" class="self-link">联系</a>
						<a href="#" class="self-link">加入</a>
						<a href="#" class="self-link">赞助</a>
						<a href="#" class="self-link">登录</a>
					</div>
				</div>
				<div id="nav-wrap">
					<ul id="nav-list-con" class="clearfix">
						<li data-type="全部" class="nav-item nav-item-active">首页</li>
						<li data-type="培训" class="nav-item">培训</li>
						<li data-type="薪酬" class="nav-item">薪酬</li>
						<li data-type="绩效" class="nav-item">绩效</li>
						<li data-type="劳动关系" class="nav-item">劳动关系</li>
						<li data-type="信息化" class="nav-item">信息化</li>
						<li class="nav-item nav-item-more">更多</li>
					</ul>
					<div class="search-con">
						<form action="" method="post">
							<input type="search" placeholder="搜索" id="search-input" name="" />
							<input type="submit" id="search-submit" />
						</form>
					</div>
				</div>
				<a href="/" id="logo-link"></a>
			</div>
		</div>
		<!-- 顶部焦点区 -->
		<div id="focus-con">
			<div id="pic-slider-con">
				<ul class="slider-inner clearfix">
					<li data-index="0" class="slider-item">
						<a target="_blank" href="#" class="slider-item-link">
							<img src="http://placehold.it/470x200" />
						</a>
						<div class="slider-item-desc">111111111</div>
					</li>
					<li data-index="1" class="slider-item">
						<a target="_blank" href="#" class="slider-item-link">
							<img src="http://placehold.it/470x200" />
						</a>
						<div class="slider-item-desc">第二个图片范德萨发撒大范德萨范德萨范德萨发</div>
					</li>
					<li data-index="2" class="slider-item">
						<a target="_blank" href="#" class="slider-item-link">
							<img src="http://placekitten.com/g/470/200" />
						</a>
						<div class="slider-item-desc">第三个</div>
					</li>
					<li data-index="3" class="slider-item">
						<a target="_blank" href="#" class="slider-item-link">
							<img src="http://placehold.it/470x200" />
						</a>
						<div class="slider-item-desc">第四个4444啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊发送的范德萨发我我我我我</div>
					</li>
					<li data-index="4" class="slider-item">
						<a target="_blank" href="#" class="slider-item-link">
							<img src="http://placekitten.com/g/470/200" />
						</a>
						<div class="slider-item-desc">第五个55555555</div>
					</li>
				</ul>
			</div>
			<div id="post-recommend-con">
				<div id="post-recommend-wrap">
					<ul class="post-recommend-con">
						<li class="post-recommend-item">
							<a href="#" class="post-recommend-link">
								<img src="http://placehold.it/90x90">
								<div class="post-content">
									<h3 class="post-title">这里是i文章的title，可能会出现很长的文字</h3>
									<p class="post-digest">这个地方是显示文章的摘要，当然了，只是显示其中的一部分，要看的话，还需要点击文章链接，进入文章页，才能看到全部的文章内容。</p>
								</div>
							</a>
						</li>
						<li class="post-recommend-item">
							<a href="#" class="post-recommend-link">
								<img src="http://placekitten.com/g/90/90">
								<div class="post-content">
									<h3 class="post-title">这里是i文章的title，可能会出现很长的文字</h3>
									<p class="post-digest">这个地方是显示文章的摘要，当然了，只是显示其中的一部分，要看的话，还需要点击文章链接，进入文章页，才能看到全部的文章内容。</p>
								</div>
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- 主要内容区域 -->
		<div id="content-wrap" class="clearfix">
			<div id="sidebar">
				<dl class="sidebar-item">
					<dt class="sidebar-item-title">每日博学<a class="more" href="#">更多</a></dt>
					<dd>
						<div class="video-item">
							<img src="http://placekitten.com/g/270/120" />
							<div class="video-desc-wrap">
								<p class="video-desc">
									新型导弹驱逐舰郑州舰入列命名授旗仪式在东海舰队某驱逐舰支队隆重举行，标志着该舰正式加入中国海军战斗序列。郑州舰是中国自行研制设计生产的新一代导弹驱逐舰，为有着“中华神盾”美誉的某型驱逐舰后续舰，也是东海舰队继长春舰之后入列的第二艘该型舰艇。该舰舷号151，最大长度155米，宽17米，满载排水量6000余吨，装备了多套中国自主研发的新型武器装备，性能先进，技术含量高，可单独或协同海军其他兵力攻击水面舰艇、潜艇，
								</p>
								<a target="_blank" href="http://www.chinanews.com/tp/hd2011/2013/12-26/282891.shtml#nextpage" class="video-link">立即播放</a>
							</div>
						</div>
						<div class="video-item">
							<img src="http://placekitten.com/g/270/120" />
							<div class="video-desc-wrap">
								<p class="video-desc">
									新型导弹驱逐舰郑州舰入列命名授旗仪式在东海舰队某驱逐舰支队隆重举行，标志着该舰正式加入中国海军战斗序列。郑州舰是中国自行研制设计生产的新一代导弹驱逐舰，为有着“中华神盾”美誉的某型驱逐舰后续舰，也是东海舰队继长春舰之后入列的第二艘该型舰艇。该舰舷号151，最大长度155米，宽17米，满载排水量6000余吨，装备了多套中国自主研发的新型武器装备，性能先进，技术含量高，可单独或协同海军其他兵力攻击水面舰艇、潜艇，
								</p>
								<a target="_blank" href="http://www.chinanews.com/tp/hd2011/2013/12-26/282891.shtml#nextpage" class="video-link">立即播放</a>
							</div>
						</div>
					</dd>
				</dl>

				<!-- 客户伙伴 -->
				<dl class="sidebar-item">
					<dt class="sidebar-item-title">客户伙伴<a class="more" href="#">更多</a></dt>
					<dd>
						<ul id="customer-con" class="clearfix">
							<li class="customer-item">
								<a class="customer-link" target="_blank" href="#">
									<img src="http://placehold.it/50x50">
									<div class="customer-name">luoochao</div>
								</a>
							</li>
							<li class="customer-item">
								<a class="customer-link" target="_blank" href="#">
									<img src="http://placehold.it/50x50">
									<div class="customer-name">test</div>
								</a>
							</li>
							<li class="customer-item">
								<a class="customer-link" target="_blank" href="#">
									<img src="http://placehold.it/50x50">
									<div class="customer-name">luoochao</div>
								</a>
							</li>
							<li class="customer-item">
								<a class="customer-link" target="_blank" href="#">
									<img src="http://placehold.it/50x50">
									<div class="customer-name">微笑前行</div>
								</a>
							</li>
							<li class="customer-item">
								<a class="customer-link" target="_blank" href="#">
									<img src="http://placehold.it/50x50">
									<div class="customer-name">luoochao</div>
								</a>
							</li>
							<li class="customer-item">
								<a class="customer-link" target="_blank" href="#">
									<img src="http://placehold.it/50x50">
									<div class="customer-name">旅游网</div>
								</a>
							</li>
							<li class="customer-item">
								<a class="customer-link" target="_blank" href="#">
									<img src="http://placehold.it/50x50">
									<div class="customer-name">luoochao</div>
								</a>
							</li>
							<li class="customer-item">
								<a class="customer-link" target="_blank" href="#">
									<img src="http://placehold.it/50x50">
									<div class="customer-name">luoochao</div>
								</a>
							</li>
						</ul>
					</dd>
				</dl>

				<!-- 赞助伙伴 -->
				<dl class="sidebar-item">
					<dt class="sidebar-item-title">赞助伙伴<a class="more" href="#">更多</a></dt>
					<dd>
						<ul id="customer-con" class="clearfix">
							<li class="customer-item">
								<a class="customer-link" target="_blank" href="#">
									<img src="http://placehold.it/50x50">
									<div class="customer-name">luoochao</div>
								</a>
							</li>
							<li class="customer-item">
								<a class="customer-link" target="_blank" href="#">
									<img src="http://placehold.it/50x50">
									<div class="customer-name">test</div>
								</a>
							</li>
							<li class="customer-item">
								<a class="customer-link" target="_blank" href="#">
									<img src="http://placehold.it/50x50">
									<div class="customer-name">luoochao</div>
								</a>
							</li>
							<li class="customer-item">
								<a class="customer-link" target="_blank" href="#">
									<img src="http://placehold.it/50x50">
									<div class="customer-name">微笑前行</div>
								</a>
							</li>
							<li class="customer-item">
								<a class="customer-link" target="_blank" href="#">
									<img src="http://placehold.it/50x50">
									<div class="customer-name">luoochao</div>
								</a>
							</li>
							<li class="customer-item">
								<a class="customer-link" target="_blank" href="#">
									<img src="http://placehold.it/50x50">
									<div class="customer-name">旅游网</div>
								</a>
							</li>
							<li class="customer-item">
								<a class="customer-link" target="_blank" href="#">
									<img src="http://placehold.it/50x50">
									<div class="customer-name">luoochao</div>
								</a>
							</li>
							<li class="customer-item">
								<a class="customer-link" target="_blank" href="#">
									<img src="http://placehold.it/50x50">
									<div class="customer-name">luoochao</div>
								</a>
							</li>
						</ul>
					</dd>
				</dl>

			</div>
			<div id="post-container-wrap">
				<ul id="post-container">
					<li class="post-item clearfix">
						<img src="http://placekitten.com/g/220/120" />
						<div class="post-content-wrap">
							<h4 class="post-item-title">
								<a class="post-item-link" target="_blank" href="#">
									【早报】一个半月时间，余额包规模从45亿到1000亿 国海军战斗序列。郑州舰是中国自
								</a>
							</h4>
							<div class="post-meta-info">
								<span class="post-meta-time">2013-12-28 19:43</span>
								<span class="post-meta-pv">89</span>
							</div>
							<div class="post-abstract">
								新型导弹驱逐舰郑州舰入列命名授旗仪式在东海舰队某驱逐舰支队隆重举行，标志着该舰正式加入中国海军战斗序列。郑州舰是中国自行研制设计生产的新一代导弹驱逐舰，为有着“中华神盾”美誉的某型驱逐舰后续舰，也是东海舰队继长春舰之后入列的第二艘该型舰艇。该舰舷号151，最大长度155米，宽17米，满载排水量6000余吨，装备了多套中国自主研发的新型武器装备，性能先进，技术含量高，可单独或协同海军其他兵力攻击水面舰艇、潜艇，
							</div>
						</div>
					</li>
					<li class="post-item clearfix">
						<img src="http://placekitten.com/g/220/120" />
						<div class="post-content-wrap">
							<h4 class="post-item-title">
								<a class="post-item-link" target="_blank" href="#">
									【早报】一个半月时间，余额包规模从45亿到1000亿 国海军战斗序列。郑州舰是中国自
								</a>
							</h4>
							<div class="post-meta-info">
								<span class="post-meta-time">2013-12-28 19:43</span>
								<span class="post-meta-pv">89</span>
							</div>
							<div class="post-abstract">
								新型导弹驱逐舰郑州舰入列命名授旗仪式在东海舰队某驱逐舰支队隆重举行，标志着该舰正式加入中国海军战斗序列。郑州舰是中国自行研制设计生产的新一代导弹驱逐舰，为有着“中华神盾”美誉的某型驱逐舰后续舰，也是东海舰队继长春舰之后入列的第二艘该型舰艇。该舰舷号151，最大长度155米，宽17米，满载排水量6000余吨，装备了多套中国自主研发的新型武器装备，性能先进，技术含量高，可单独或协同海军其他兵力攻击水面舰艇、潜艇，
							</div>
						</div>
					</li>
					<li class="post-item clearfix">
						<img src="http://placekitten.com/g/220/120" />
						<div class="post-content-wrap">
							<h4 class="post-item-title">
								<a class="post-item-link" target="_blank" href="#">
									【早报】一个半月时间，余额包规模从45亿到1000亿 国海军战斗序列。郑州舰是中国自
								</a>
							</h4>
							<div class="post-meta-info">
								<span class="post-meta-time">2013-12-28 19:43</span>
								<span class="post-meta-pv">89</span>
							</div>
							<div class="post-abstract">
								新型导弹驱逐舰郑州舰入列命名授旗仪式在东海舰队某驱逐舰支队隆重举行，标志着该舰正式加入中国海军战斗序列。郑州舰是中国自行研制设计生产的新一代导弹驱逐舰，为有着“中华神盾”美誉的某型驱逐舰后续舰，也是东海舰队继长春舰之后入列的第二艘该型舰艇。该舰舷号151，最大长度155米，宽17米，满载排水量6000余吨，装备了多套中国自主研发的新型武器装备，性能先进，技术含量高，可单独或协同海军其他兵力攻击水面舰艇、潜艇，
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>

		<!-- 底部版权文字 -->
		<div id="footer">
			霍桑咨询&copy;2013
		</div>
	</div>

	<div id="back-top" title="返回顶部">&#8673;</div>

	<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
	<script type="text/javascript" src="./js/lib/underscore.js"></script>
	<script type="text/javascript" src="./js/index/index.js"></script>
</body>
</html>